<template>
  <view>
    <view class="search-box">
      <MySearch bgc="#fff" radius="15"></MySearch>
    </view>

    <swiper
    indicator-dots
    indicator-color="#5a5a5a"
    indicator-active-color="#ff4b35"
    autoplay
    current="0"
    interval="3500"
    duration="1200"
    circular
    style="height:350rpx;"
    >
      <swiper-item v-for="item in bannerList" :key="item.imgName" @click="goDetailPage(item.link.form[0].value)" >
        <image :src="item.imgUrl" alt="" />
      </swiper-item>
    </swiper>

    <uni-notice-bar scrollable speed="50" showIcon single :text="notice.params.text" :background-color="notice.style.background" :color="notice.style.textColor" style="fontSize:60rpx;margin-bottom:0;
"></uni-notice-bar>

    <view class="navBar">
      <view class="navBar-item" v-for="item in navBarList" :key="item.imgName" @click="goCategoryPage">
        <view class="img-box"><image :src="item.imgUrl" /></view>
        <view>{{item.text}}</view>
      </view>
    </view>

    <view style="height:260rpx" @click="goCategoryPage">
      <image :src="homeList[4].data[0].imgUrl"/>
    </view>

    <view class="guess">
      <rich-text :nodes="homeList[5].params.content" ></rich-text>
    </view>

    <view class="goods-item" v-for="item in goodsList" :key="item.goods_id" @click="goDetailPage(item.goods_id)">
      <view class="goods-pic">
        <image :src="item.goods_image"/>
      </view>
      <view class="goods-info">
        <text class="goods-title">{{item.goods_name}}</text>
        <view class="sold">已售{{item.goods_sales}}件</view>
        <view class="price">
          <text class="new-price">￥{{item.goods_price_min}}</text>
          <text v-if="item.line_price_min!=='0.00'" class="old-price">￥{{item.line_price_min}}</text>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import MySearch from '@/components/MySearch'
export default {
  components:{
    MySearch
  },
  data(){
    return {
      homeList:[],
      bannerList:[],
      notice:{},
      navBarList:[],
      goodsList:[],
    }
  },
  created(){
    this.getHomeList()
  },
  methods:{
    async getHomeList(){
      const {data,status} = await this.$http.get('/page/detail')
      if (status!==200) return this.$toast()
      const arr= data.pageData.items
      this.homeList = arr
      this.bannerList = arr[1].data
      this.notice = arr[2]
      this.navBarList = arr[3].data
      this.goodsList = arr[6].data
    },
    goDetailPage(id){
      uni.navigateTo({
        url:'/pages_sub1/product-detail/product-detail?gid=' + id
      })
    },
    goCategoryPage(){
      uni.switchTab({
        url:'/pages/category/category'
      })
    },
  }
}
</script>

<style lang="scss">
  page {
    background-color: #f6f6f6;
  }

  image{
    width: 100%;
    height: 100%;
  }

  .search-box {
    height:120rpx;
    background-color:f1f1f2;
    display:flex;
    justify-content: center;
    align-items: center;
  }

  .navBar{
    display: flex;
    flex-wrap: wrap;
    height: 320rpx;
    .navBar-item{
      width: 20%;
      height: 50%;
      background-color: #fff;
      .img-box{
        margin: 0 auto;
        width: 70%;
        height: 70%;
      }
      view {
        text-align: center;
      }
    }
  }
 .guess {
    margin-bottom: 5rpx;
    padding-top: 10rpx;
    height: 60rpx;
    font-size: 26rpx;
    background-color: #fff;
  }
  .goods-item {
    box-sizing: border-box;
    display: flex;
    margin-bottom: 10rpx;
    padding: 3%;
    height: 270rpx;
    background-color: #fff;
    .goods-pic {
      width: 30%;
      height: 100%;
    }
    .goods-info {
      margin: 20rpx 0 0 30rpx;
      width: 60%;
      .goods-title {
        width: 100%;
        height: 70rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 26rpx;
      }
      .sold{
        margin: 10rpx 0 10rpx;
        font-size: 24rpx;
        color: #a9a9a9;
      }
      .new-price {
        margin-right: 20rpx;
        font-size: 28rpx;
        color: red;
      }
      .old-price {
        text-decoration: line-through;
        font-size: 22rpx;
        color: #a4a6a7;
      }
    }
  }

</style>